.em-colors-box {
  display: flex;
  flex-flow: row wrap;
  color: #fff;
  .colors-item {
    margin-right: 3px;
    padding-bottom: 12px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    .colors-item-bar {
      width: 100%;
      position: absolute;
      top: -12px;
      height: 12px;
      line-height: 12px;
      text-align: right;
      display: block;
      .colors-item-tool {
        display: inline-block;
        width: 12px;
        height: 100%;
        margin-left: 2px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 50%;
      }
      &.small{
        top: -10px;
        height: 10px;
        line-height: 10px;
        .colors-item-tool {
          width: 10px;
        }
      }
    }
    &:hover {
      .colors-item-bar {
        display: block;
      }
    }
    i.el-icon-plus {
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 50%;
      font-size: 14px;
    }
  }
}
